<template>
    <div class="employee-container">
      <el-row>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item >首页</el-breadcrumb-item>
          <el-breadcrumb-item>人员信息管理</el-breadcrumb-item>
          <el-breadcrumb-item>创作者人员管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <br>
      <el-row>
        <el-form label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="用户名" label-width="80px">
                <el-input class="input" v-model="creator_query.name" filterable placeholder="请输入查找的用户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话" label-width="80px">
                <el-input class="input" v-model="creator_query.phone" filterable placeholder="请输入查找的联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button @click="query" class="button_check" icon="el-icon-search">搜索</el-button>
            </el-col>
          </el-row>
          <el-button-group style="margin-left: 20px">
            <el-button  type="primary" icon="el-icon-edit" @click="btnAddClick">添加</el-button>
            <el-button  type="primary" icon="el-icon-share" @click="btnAlterClick">修改</el-button>
            <el-button icon="el-icon-delete" @click="btnDeleteClick">删除</el-button>
          </el-button-group>
        </el-form>
      </el-row>
      <el-row>
        <el-table
          @row-dblclick="handleDoubleClick"
          @current-change="handleCurrentChange"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="numble"
          label="序号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话">
        </el-table-column>
        <el-table-column
          prop="detail"
          label="">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-row>
      <el-row>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="1000">
          </el-pagination>
        </div>
      </el-row>
      <el-dialog
        title="创作者添加"
        :visible.sync="dialogVisble"
        width="30%"
        :before-close="handleClose">
        <el-form>
          <el-form-group>
            <el-form-item label-width="95px" label="序号">
              <el-input v-model="creator.id"/>
            </el-form-item>
            <el-form-item label-width="95px" label="创作人名称">
              <el-input v-model="creator.name"/>
            </el-form-item>
            <el-form-item label-width="95px" label="联系号码">
              <el-input v-model="creator.phone"/>
            </el-form-item>
          </el-form-group>
        </el-form>
        <span slot="footer">
      <el-button @click="dialogVisble=false">取消</el-button>
      <el-button type="primary" @click="sumbmitHandle_add">确定</el-button>
    </span>
      </el-dialog>
<!--      修改的模态窗口-->
      <el-dialog
        title="修改信息"
        :visible.sync="dialogVisble_alter"
        width="30%"
        :before-close="handleClose_alter">
        <el-form>
          <el-form-group>
            <el-form-item label-width="165px" label="创作人名称：">
              <el-input v-model="creator.name"/>
            </el-form-item>
            <el-form-item label-width="165px" label="联系号码">
              <el-input v-model="creator.phone"/>
            </el-form-item>
          </el-form-group>
        </el-form>
        <span slot="footer">
      <el-button @click="dialogVisble_alter=false">取消</el-button>
      <el-button type="primary" @click="sumbmitHandle_alter">确定</el-button>
    </span>
      </el-dialog>
<!--      删除的模态窗口-->
      <el-dialog
        title="请输入您想删除的创作人名称"
        :visible.sync="dialogVisble_delete"
        width="30%"
        :before-close="handleClose_delete">
        <el-form>
          <el-form-group>
            <el-form-item label-width="160px" label="创作人名称：">
              <el-input v-model="creator_delete.name"/>
            </el-form-item>
          </el-form-group>
        </el-form>
        <span slot="footer">
        <el-button @click="dialogVisble_delete=false">取消</el-button>
        <el-button type="primary" @click="sumbmitHandle_delete">确定</el-button>
          </span>
      </el-dialog>
    </div>
</template>
<script>
    export default {
      data() {
        return {
          info:{
            title:'创作者修改'
          },
          input:'',
          tableData: [],
          currentPage1: 5,
          currentPage2: 5,
          currentPage3: 5,
          currentPage4: 4,
          delivery: false,
          result:[],
          dialogVisble:false,
          dialogVisble_alter:false,
          dialogVisble_delete:false,
          numble:'',
          message:'',
          creator_query:{
            name:'',
            phone:''
          },
          creator_delete:{
            name:''
          },
          creator:{
            id:'',
            name:'',
            phone:''
          },
        }
      },
      mounted(){
        /*挂载结束之后*/
        var _this=this;
        this.axios({
          url:'http://localhost:3000/creator/creators',
          method:'get'
        }).then(function (res){
          _this.tableData=res.data;
        })
      },
      methods: {
        //以下是搜索的方法
        //以下是删除信息的方法
        sumbmitHandle_delete(){
            for (var i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].name == this.creator_delete.name) {
                this.tableData.splice(i, 1);
                this.$message({
                  message: '删除成功'
                })
              }
              if (i == this.tableData.length-1) {
                this.$message({
                  message: '删除失败，找不到该用户'
                })
              }
            }
          this.dialogVisble_delete=false;
        },
        btnDeleteClick(){
          this.dialogVisble_delete=true;
        },
        handleClose_delete(){
          this.dialogVisble_delete=false;
        },
        //以下是修改信息的方法
        handleDoubleClick(row){
          console.log(row);
          this.creator=row;
          this.dialogVisble_alter=true;
        },
        //----------------------
        btnAlterClick(){
          this.info.title="创作者添加"
          this.dialogVisble_alter=true;
        },
        handleClose_alter(){
          this.dialogVisble_alter=false;
        },
        sumbmitHandle_alter() {
          this.dialogVisble_alter=false;
          var _this = this;
          this.axios({
            url: 'http://localhost:3000/creator/',
            method: 'get',
            params: {
              name: this.name,
              phone: this.phone
            },
          }).then(function (res) {
            if (res.data.flag){
            }else {
              _this.errMsg.isShow=true;
              _this.$message({
                message:'不存在该用户'
              })
            }
          })
        },
        //以下是确定按钮的方法
        sumbmitHandle_add(){
          var _this2=this;
          this.axios({
            url:'http://127.0.0.1:3000/creator/crea_add',
            method:'get',
            params:{
              name:this.creator.name,
              phone:this.creator.phone,
              numble:this.creator.id
            }
          }).then(function (res) {
            if (res.data.flag){
              _this2.tableData=res.data.crea;
              _this2.$message('添加成功')
              _this2.dialogVisible= false;
            }else {
              alert('添加失败');
            }
          })
        },
        btnAddClick(){
          this.dialogVisble=true;
        },
        handleClose(){
          this.dialogVisble=false;
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },query(){
          for (var i=0;i<this.tableData.length;i++){
            if(this.tableData[i].name==this.creator_query.name&&this.tableData[i].phone==this.creator_query.phone){
              this.$message({
                message:'已找到该用户,序号为'+this.tableData[i].numble
              })
              break;
            }
            if (i == this.tableData.length-1) {
              this.$message({
                message: '无法找到所给信息的用户'
              })
            }
          }
        }
      },
    }
</script>
<style scoped>
  .button_check{
    background-color: pink;
    margin-left: 25px;
  }
  .input{
    width: 200px
  }
</style>
